<template>
	<view class="pages">
	<!-- 	<div class="serachBox">
			<u-search :placeholder="$t('huiyuanidserchar')" v-model="user_id" :showAction="false" bgColor="#fff"
				@search="searchContent" @custom="searcClickhContent" @clear="clearCibtent"
				searchIconColor="#273562"></u-search>
		</div> -->
		<view class="selectBox">
			<view class="selectBoxItems" @click="startsdateshow = true">
				<image src="../../static/date.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 15rpx;">
				</image>
				<view class="tips">
					{{startTime ? startTime : $t('StartDate')}}
					<image v-if="startTime" src="/static/qingchu.png"
						style="width: 30rpx;height: 30rpx;margin-left: 15rpx;" @click.stop="clearDate('startTime')">
					</image>
				</view>
				<view class="icon">
					<u-icon name="arrow-down" v-if="startsdateshow == false"></u-icon>
					<u-icon name="arrow-up" v-else></u-icon>
				</view>
			</view>

			<view class="selectBoxItems" @click="enddateshow = true">
				<image src="../../static/date.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 15rpx;">
				</image>
				<view class="tips">

					{{endTime ? endTime : $t('EndDate')}}
					<image v-if="endTime" src="/static/qingchu.png" mode=""
						style="width: 30rpx;height: 30rpx;margin-left: 15rpx;" @click.stop="clearDate('endTime')">
					</image>
				</view>
				<view class="icon">
					<u-icon name="arrow-down" v-if="enddateshow == false"></u-icon>
					<u-icon name="arrow-up" v-else></u-icon>
				</view>
			</view>
		</view>
		<mescroll-uni @init="mescrollInit" :top="180" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="items" v-for="(items,index) in dadaList"
				@click="$next('/pages/Commission/CommissionMingXiDetalis',items)">
				<view class="itemsLeft">
					<image src="../../static/moneylist.png" mode="" style="width: 80rpx;height:80rpx;">
				</view>
				<view class="itemsCenter">
					<view class="itemsCenterT">
							{{$t('CommissionMingXName')}}：{{ hotLength(items.real_name,20)}}
					</view>
					<view class="itemsCenterB">
						{{$t('CommissionMingXiID')}}：{{items.id}}
					</view>
					<view class="itemsCenterB">
						{{$t('CommissionMingXiLevel')}}：{{items.level_id}}
					</view>
					<view class="itemsCenterB">
						{{$t('CommissionMingXicp')}}：${{ $formatNumberWithCommas(items.moneys ? items.moneys : 0) || '0.00'}}
					</view>
				</view>
			
				<image src="../../static/you.png" mode="" style="width: 50rpx;height:50rpx;margin-right: 10rpx;">
			</view>
		</mescroll-uni>
		<!-- 选年份器 -->
		<u-datetime-picker :show="startsdateshow" v-model="date" :minDate="1609430400000" @confirm="startconfirm"
			mode="date" :confirmText="$t('Confirm')" :cancelText="$t('Cancel')"
			@cancel="startsdateshow = false"></u-datetime-picker>
		<!-- 选年月份 -->
		<u-datetime-picker :show="enddateshow" v-model="endTimevalue" :minDate="1609430400000"  @confirm="endconfirm" mode="date"
			:confirmText="$t('Confirm')" :cancelText="$t('Cancel')" @cancel="enddateshow = false"></u-datetime-picker>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				newUrl: 1, //0为新接口1为老接口
				user_id: '',
				startTime: '',
				endTime: '',
				status: '',
				startsdateshow: false,
				enddateshow: false,
				date: '',
				endTimevalue: Number(new Date()),
				searchKey: '',
				endShiJianChuo:null,
				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				top: "24rpx",
				dadaList: [],
				pager: {
					currentPage: 1,
					maxResultCount: 100
				},
			}
		},
		onLoad() {
			// 获取当前时间戳
			this.endShiJianChuo = Date.now()
		},  
		watch: {
			user_id: {
				immediate: false,
				handler(newValue, oldValue) {
					this.getList()
				}
			}
		},
		methods: {
			// 重置时间
			clearDate(val) {
				if (val == 'startTime') {
					this.startTime = ''
				} else {
					this.endTime = ''
				}
				this.getList()
			},
			// 选择开始时间
			startconfirm(e) {
				let date = new Date(e.value)
				const y = date.getFullYear()
				const m = (date.getMonth() + 1 + '').padStart(2, '0')
				const d = (date.getDate() + '').padStart(2, '0')
				this.startTime = `${y}-${m}-${d}`
				this.startsdateshow = false
				this.getList()
			},
			// 选择结束时间
			endconfirm(e) {
				let date = new Date(e.value)
				const y = date.getFullYear()
				const m = (date.getMonth() + 1 + '').padStart(2, '0')
				const d = (date.getDate() + '').padStart(2, '0')
				this.endTime = `${y}-${m}-${d}`
				this.enddateshow = false
				this.getList()
			},

			stuats(val) {
				let txt = ''
				if (val == 1) {
					txt = 'active'
				} else if (val == 3) {
					txt = 'submitted'
				} else if (val == 0) {
					txt = 'finished'
				} else if (val == 2) {
					txt = 'reviewed'
				}
				return txt
			},
			// 文字超出打点
			hotLength(val, len) {
				if (val.length > len) {
					return `${val.substring(0,len)}...`
				} else {
					return val
				}
			},


			// 获取数据
			async getList() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				const res = await this.$get(`/backend/user/tp-money-self`, {
					page: this.pager.currentPage,
					perPage: this.pager.maxResultCount,
					user_id: this.user_id,
					start_time: this.startTime,
					end_time: this.endTime,
				}, this.newUrl)
				if (res.data.data.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.dadaList = []
					}
					this.dadaList = this.dadaList.concat(res.data.data.list)
				}
				this.mescroll.endBySize(res.data.data.list.length, res.data.data.total)
			},
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getList()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},
			// 回车触发
			searchContent(e) {
				this.number = e
				this.getList()
			},
			// 点击搜索触发
			searcClickhContent(e) {
				this.number = e
				this.getList()
			},
			// 清空内容时触发
			clearCibtent(e) {
				this.number = e
				this.getList()
			},

		}
	}
</script>

<style>
	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		background-color: #F0F0F0;
		padding: 0 20rpx;
		box-sizing: border-box;

	}

	.settings {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		margin-top: 32rpx;
	}

	.settingsItems {
		height: 64rpx;
		background-color: #fff;
		line-height: 64rpx;
		font-family: Montserrat;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: center;
		color: #273562;
		margin-left: 20rpx;
		padding: 0 20rpx;
		border-radius: 32rpx;
		margin-bottom: 20rpx;
	}

	.selectBox {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		height: 64rpx;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.selectBoxItems {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15rpx;
		box-sizing: border-box;
		width: 330rpx;
		height: 100%;
		background-color: #fff;
		margin-left: 8rpx;
	}

	.tips {
		display: flex;
		align-items: center;
		width: 250rpx;
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 10px;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		color: #808080;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 10rpx;
		width: 710rpx;
		/* height: 168rpx; */
		min-height: 168rpx;
		background-color: #fff;
		/* margin-bottom: 12rpx; */
		margin: 0 auto 12rpx;
		box-sizing: border-box;
		border-left: 16rpx solid #273562;
		padding: 20rpx 0;
		/* box-sizing: border-box; */
	}

	.itemsLeft {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		/* width: 150rpx;
		height: 150rpx; */
		margin: 0 30rpx 0 30rpx;
	}

	.itemsCenter {
		width:530rpx;

	}

	.itemsCenterT {
		font-family: Montserrat;
		font-size: 35rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
	}

	.itemsCenterB {
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 600;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		margin: 10rpx 0 10rpx;
		color: #333;
	}

	.itemsCenterB:last-child {
		margin-bottom: 0;
	}

	.itemsRight {
		width: 145rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 16rpx;
		font-family: Inter;
		font-size: 24rpx;
		font-weight: 700;
		text-align: center;
		color: #fff;
		background-color: #73E11D;
		padding: 6rpx 10rpx;
	}

	.RX {
		width: 56rpx;
		height: 56rpx;
		position: absolute;
		right: 5rpx;
		bottom: 5rpx;
		background-color: #fff;
		border-radius: 50%;
	}

	.serachBox {
		width: 100%;
		height: 64rpx;
		margin-top: 26rpx;
	}

	.addItemsStyle {
		display: flex;
		align-items: center;
		background-color: #273562;
		color: #fff;
	}

	.submitted {
		background-color: #273562;
	}
</style>